<script setup lang="ts" name="PhoneHeader">
import dayjs from 'dayjs'

const timer = ref(null)
const powerPercent = ref(100)
const isWarning = ref(false)
const isDanger = ref(false)
const powerOver = () => {
  clearInterval(timer.value)
  timer.value = setInterval(() => {
    powerPercent.value--
    if (powerPercent.value <= 0) { powerPercent.value = 0 }
    if (powerPercent.value >= 0 && powerPercent.value <= 10) {
      isDanger.value = true
      isWarning.value = false
    } else if (powerPercent.value > 10 && powerPercent.value <= 30) {
      isDanger.value = false
      isWarning.value = true
    } else {
      isDanger.value = false
      isWarning.value = false
    }
  }, 100)
}
const powerOut = () => {
  clearInterval(timer.value)
  timer.value = setInterval(() => {
    powerPercent.value++
    if (powerPercent.value >= 100) { powerPercent.value = 100 }
    if (powerPercent.value >= 0 && powerPercent.value <= 10) {
      isDanger.value = true
      isWarning.value = false
    } else if (powerPercent.value > 10 && powerPercent.value <= 30) {
      isDanger.value = false
      isWarning.value = true
    } else {
      isDanger.value = false
      isWarning.value = false
    }
  }, 100)
}

const nowTime = ref('')
// 获取当前日期时间的方法
const getNowDateTime = () => {
  nowTime.value = dayjs().format('HH:mm')
}
// 控制动态显示时间的定时器字段
const dateTimer = ref(0)
// 动态显示时间的定时器
const dateTimeInterval = () => {
  dateTimer.value = window.setInterval(getNowDateTime, 1000)
}
onMounted(() => {
  // 默认锁屏后立即获取当前日期时间
  getNowDateTime()
  dateTimeInterval()
})
</script>

<template>
  <div class="phone-header">
    <div class="left-panel">
      <div class="liantong">
        中国联通
        <span>HD</span>
      </div>
      <div class="xinhao"></div>
      <div class="wifi">
        <ul>
          <li class="first"></li>
          <li class="second"></li>
          <li class="third"></li>
          <li class="fourth"></li>
        </ul>
      </div>
    </div>
    <div class="right-panel">
      <div :class="['source_num', isWarning?'is-warning':'', isDanger?'is-danger':'']">
        <span>{{powerPercent}}%</span>
      </div>
      <div :class="['source', isWarning?'is-warning':'', isDanger?'is-danger':'']" @mouseover="powerOver" @mouseout="powerOut"><span :style="{width: powerPercent + '%'}"></span></div>
      <div class="time">{{nowTime}}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.phone-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0 15px;
  color: var(--el-phone-header-color);
  font-size: 12px;
  height: 26px;
  line-height: 26px;
  display: flex;
  z-index: 100;

  .left-panel, .right-panel{
    display: flex;
    flex: 1;
    align-items: center;
  }

  .right-panel{
    justify-content: flex-end;
    .source {
      width: 30px;
      height: 14px;
      border: var(--el-phone-header-color) 1px solid;
      border-radius: 2px;
      position: relative;
      padding: 1px;
      margin-left: 6px;
      margin-right: 8px;
      &::after {
        content: "";
        width: 2px;
        height: 8px;
        background: var(--el-phone-header-color);
        position: absolute;
        right: -4px;
        top: 2.5px;
        border-radius: 2px;
      }
      span {
        height: 100%;
        background: var(--el-phone-header-color);
        transition: .3s;
        border-radius: 1px;
        display: block;
      }
      &.is-warning {
        border: var(--el-color-warning) 1px solid;
        &::after{
          background: var(--el-color-warning);
        }
        span{
          background: var(--el-color-warning);
        }
      }
      &.is-danger {
        border: var(--el-color-danger) 1px solid;
        &::after{
          background: var(--el-color-danger);
        }
        span{
          background: var(--el-color-danger);
        }
      }
    }
    .source_num{
      &.is-warning {
        color: var(--el-color-warning);
      }
      &.is-danger {
        color: var(--el-color-danger);
      }
    }
    .time {
      position: relative;
    }
  }

  .left-panel{

    .liantong {
      span {
        background: var(--el-phone-header-color);
        padding: 0px 3px;
        font-size: 12px;
        border-radius: 3px;
        margin-left: 2px;
        color: #fff;
      }
      }

    .xinhao {
      width: 34px;
      height: 20px;
      overflow: hidden;
      position: relative;
      top: -2px;
      margin-left: 3px;
      &::before {
        content: "5G";
        position: absolute;
        left: 0;
        top: -4px;
        transform: scale(0.7);
      }
      &::after {
        content: "";
        width: 2px;
        border-radius: 2px;
        height: 20px;
        display: block;
        box-shadow: 3px 16px 0px 0px var(--el-phone-header-color), 7px 13px 0px 0px var(--el-phone-header-color), 11px 10px 0px 0px var(--el-phone-header-color), 15px 7px 0px 0px var(--el-phone-header-color), 19px 4px 0px 0px var(--el-phone-header-color);
        position: absolute;
        left: 10px;
        animation-name: xhplus;
        animation-duration: 8s;
        animation-iteration-count: infinite;
      }
    }
    .wifi {
      margin-left: 3px;
      position: relative;
      width: 20px;
      height: 20px;
      ul {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
        transform: rotate(45deg);
        position: absolute;
        top: -35%;
        li{
          border: 2.3px solid var(--el-phone-header-color);// 根据box高度宽度设置 border宽度，根据几个信号改变border颜色
          border-radius: 50%;
          position: absolute;
        }
        .first {
          width: 140%;
          height: 140%;
          top: 30%;
          left: 30%;
          animation-name: wifiplus;
          animation-duration: 8s;
          animation-delay: 3s;
          animation-iteration-count: infinite;
        }
        .second {
          width: 100%;
          height: 100%;
          top: 50%;
          left: 50%;
        }
        .third {
          width: 60%;
          height: 60%;
          top: 70%;
          left: 70%;
        }
        .fourth {
          width: 15%;
          height: 15%;
          top: 90%;
          left: 90%;
        }
      }
    }
  }
}
@keyframes wifiplus {
  20% {
  opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes xhplus {
  20% {
    box-shadow: 3px 16px 0px 0px var(--el-phone-header-color), 7px 13px 0px 0px var(--el-phone-header-color), 11px 10px 0px 0px var(--el-phone-header-color), 15px 7px 0px 0px var(--el-phone-header-color), 19px 4px 0px 0px var(--el-phone-header-color);
  }
  50% {
    box-shadow: 3px 16px 0px 0px var(--el-phone-header-color), 7px 13px 0px 0px var(--el-phone-header-color), 11px 10px 0px 0px var(--el-phone-header-color), 15px 7px 0px 0px transparent, 19px 4px 0px 0px transparent;
  }
}
</style>
